<template>
	<view class="card">
		<view class="title absolute">
			<text>成为推广方的优势</text>
		</view>
		
		<view class="list mt-30 d-flex">
			<view v-for="item of list" :class="[item.id % 2 === 0 ? 'mr-40' : '', ![6, 7].includes(item.id) ? 'mb-30' : '','list_item d-flex']" :key="item.id">
				<text class="list_item_title mb-20">{{ item.title }}</text>
				<image mode="widthFix" class="list_item_icon mb-20" :src="`/static/image/share/icon${item.id}.svg`"></image>
				<text class="list_item_describe" v-html="item.describe"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const list = reactive([
		{
			title: '零门槛',
			describe: `无需专业技术背景<br />小白也可轻松上手`,
			id: 2
		},
		{
			title: '高回报',
			describe: `市场广阔，<br />收益空间大`,
			id: 3
		},
		{
			title: '灵活自由',
			describe: `自主定价权<br />赚多赚少你说了算`,
			id: 4
		},
		{
			title: '无顾虑',
			describe: `稳定性有保障<br />业务安全合规`,
			id: 5
		},
		{
			title: '数据丰富',
			describe: `支持各类型报告<br />满足多种场景`,
			id: 6
		},
		{
			title: '收益可视化',
			describe: `轻松跟踪收入<br />收益公开透明`,
			id: 7
		}
	])
</script>

<style scoped lang="scss">
.card {
	.list {
		overflow: visible;
		flex-direction: row;
		flex-wrap: wrap;
		&_item {
			padding: 25rpx;
			width: calc(50% - 20rpx);
			border-radius: 18rpx;
			background-color: #F8F6FF;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
			justify-content: center;
			align-items: center;
			flex-direction: column;
			&_title {
				color: #404040;
				font: {
					size: 28rpx;
					weight: bold;
				}
			}
			
			&_icon {
				width: 50rpx;
			}
			
			&_describe {
				line-height: 38rpx;
				text-align: center;
				color: #404040;
				font: {
					size: 26rpx
				}
			}
		}
	}
}
</style>
